<template>
  <div class="particles-js-box">
    <div id="particles-js" style="position: relative"></div>
    <div class="head flex">
      <div class="highway">
        <div class="w-100 ws flex Font highway-one">商户中心登录</div>
        <div class="w-100 ws flex Font highway-one-top">
          <div class="h-100 flexLeft highway-one-top-1">
            <i class="el-icon-user i-one"></i>
          </div>
          <div class="h-100 flex highway-one-top-2">
            <el-input
              v-model="ruleForm.account"
              placeholder="请输入账号"
              size="small"
            ></el-input>
          </div>
        </div>
        <div class="w-100 ws flex Font head-one">
          <div class="h-100 flexLeft highway-one-top-1">
            <i class="el-icon-connection i-one"></i>
          </div>
          <div class="h-100 flex highway-one-top-2">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
              show-password
              size="small"
            ></el-input>
          </div>
        </div>
        <div class="w-100 ws flex Font head-one">
          <el-button
            :loading="signIsshow"
            class="w-100"
            type="primary"
            @click="Sign"
            >登录
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import particlesJs from "particles.js";
import particlesConfig from "./particles.json";
import { login } from "@/assets/js/login";

export default {
  data() {
    return {
      signIsshow: false,
      ruleForm: {
        account: "",
        password: "",
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      particlesJS("particles-js", particlesConfig);
      document.body.style.overflow = "hidden";
    },
    async Sign() {
      if (this.ruleForm.account === "" && this.ruleForm.password === "") {
        return this.$message({
          message: "请输入账号密码",
          type: "error",
          duration: 1000,
        });
      }
      if (this.ruleForm.account && this.ruleForm.password === "") {
        return this.$message({
          message: "请输入密码",
          type: "error",
          duration: 1000,
        });
      }
      if (this.ruleForm.account === "" && this.ruleForm.password) {
        return this.$message({
          message: "请输入账号",
          type: "error",
          duration: 1000,
        });
      }
      if (this.ruleForm.account && this.ruleForm.password) {
        this.signIsshow = true;
        setTimeout(() => {
          this.signIsshow = false;
        }, 1500);
        let res = await login(this.ruleForm);
        if (res.code === 200) {
          //储存token
          sessionStorage.setItem("Token", res.data.token);
          //储存headers
          sessionStorage.setItem("heaDers", res.data.tokenName);
          //prefix
          sessionStorage.setItem("prefix", res.data.prefix);
          this.$router.push({ path: "/index" });
        }
      }
    },
  },
};
</script>

<style scoped>
.particles-js-box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

#particles-js {
  background-image: url("../assets/img/1.jpg");
  width: 100%;
  height: 100%;
}

.head {
  width: 450px;
  height: 360px;
  background: #fff;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.5);
}

.highway {
  width: 300px;
  height: 260px;
}

.highway-one {
  font-size: 24px;
  color: #333333;
}

.highway-one-top {
  margin-top: 20px;
}

.head-one {
  margin-top: 10px;
}

.highway-one-top-1 {
  font-size: 22px;
  width: 10%;
}

.highway-one-top-2 {
  width: 90%;
}

.i-one {
  color: #aaaaaa;
}
</style>
